<template>
  <div>
    <!-- <el-container>
      <el-header> -->

    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <div id="titlediv">

            &nbsp; &nbsp; &nbsp;

            收费类型：
            <el-select v-model="chargetype" placeholder="请选择" style="width: 150px">
              <el-option v-for="item in chargetypeoptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>

            &nbsp; &nbsp; &nbsp; 收费状态：

            <el-select v-model="chargestatus" placeholder="请选择" style="width: 150px">
              <el-option v-for="item in chargestatusoptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>

            &nbsp; &nbsp; &nbsp; 日期：
            <el-date-picker v-model="startAndEndDate" type="daterange" range-separator="至" start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
            <!-- value-format="yyyy-MM-dd-HH-mm-ss" -->

            &nbsp; &nbsp;

            <el-button type="primary" @click="cx(1)">查询</el-button>

            <!-- <div style="height: 16px"></div> -->


          </div>
        </div>
      </el-col>
    </el-row>

    <!-- </el-header> -->


    <el-row :gutter="20">
      <el-col :span="4">
        <div class="grid-content bg-purple">

          <div style="height: 110px; background-color: #f8ac30;">

            <!-- <div style=""></div> -->
            <!-- <p style="color: #fdedd2; text-align: center;">{{ 213 }}</p>  -->
            <div style="color: #fdedd2; text-align: center;  padding: 20px;">{{ charge }}</div>


            <p style="color: #fdedd2; text-align: center; padding: 10px;">合计收入</p>
          </div>

        </div>
      </el-col>
      <el-col :span="20">
        <div class="grid-content bg-purple">

          <div style="height: 50px; width: 100%; background-color: #52c7c6; ">

            <div style="color: #fdedd2;padding: 10px;   ">

              收支概况

              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              收费金额：{{ charge }}
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              退费金额：{{ returnPremium }}

            </div>


          </div>



        </div>

        <div style="height: 10px; width: 100%; background-color: #ffffff;">


        </div>


        <div style="height: 50px; width: 100%; background-color: #3ed279;">


          <div style="height: 50px; width: 100%; background-color: #52c7c6; ">

            <div style="color: #fdedd2;padding: 10px;   ">

              收支概况

              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              现金收入：{{ cashSr }}
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              微信收入：{{ WeChatSr }}
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
              支付宝收入：{{ AlipaySr }}




            </div>


          </div>


        </div>
      </el-col>
    </el-row>


    <el-row :gutter="20" style="margin-top: -35px;">
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <echarts2 />
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <echarts />
        </div>
      </el-col>
      <el-col :span="8">
        <div class="grid-content bg-purple">
          <echarts3 />
        </div>
      </el-col>
    </el-row>


    <el-row>
      <el-col :span="24">
        <div>


          <el-table :data="tableData">
            <el-table-column prop="id" label="序号" width="175"> </el-table-column>
            <el-table-column prop="typeId" label="类型" width="175">

              <template scope="scope">
                <span v-if="scope.row.typeId == '0'">就诊处</span>
                <span v-else-if="scope.row.typeId == '1'">挂号处</span>
                <span v-else> 其它 </span>
              </template>

            </el-table-column>
            <el-table-column prop="status" label="状态" width="175">


              <template scope="scope">
                <span v-if="scope.row.status == '0'">未支付</span>
                <span v-else-if="scope.row.status == '1'">已支付</span>
                <span v-else-if="scope.row.status == '2'">确认收款</span>
                <span v-else-if="scope.row.status == '3'">申请退款</span>
                <span v-else-if="scope.row.status == '4'">已退款</span>
                <span v-else-if="scope.row.status == '5'">部分支付</span>
                <span v-else-if="scope.row.status == '6'">完成交易</span>
                <span v-else-if="scope.row.status == '7'">部分退款</span>
                <span v-else> 其它 </span>
              </template>

            </el-table-column>
            <el-table-column prop="dzmPatient.name" label="姓名" width="175"> </el-table-column>
            <el-table-column prop="amount" label="应收" width="175"> </el-table-column>
            <el-table-column prop="dzmHisCarePaylog.paymentPlatform" label="支付类型" width="175">

              <template scope="scope">
          <span v-if="scope.row.dzmHisCarePaylog == null ">暂无支付类型</span>
          <span v-else-if="scope.row.dzmHisCarePaylog.paymentPlatform == 0 " > 现金 </span>
          <span v-else-if="scope.row.dzmHisCarePaylog.paymentPlatform == 1 " > 微信 </span>
          <span v-else-if="scope.row.dzmHisCarePaylog.paymentPlatform == 2" > 支付宝 </span>

        
        </template>


            </el-table-column>
            <el-table-column prop="addtime" label="日期" width="175" :formatter="dateForma"></el-table-column>
            <el-table-column prop="dzmHisDoctor.trueName" label="收费员" width="175"></el-table-column>
          </el-table>



        </div>
      </el-col>
    </el-row>

    <el-pagination background layout="prev, pager, next" :total=pages @current-change="handleCurrentChange">
    </el-pagination>
  </div>
</template>
<script>

import moment from "moment"; //导入文件

import echarts from "./IncomeChannel.vue";

import echarts2 from "./IncomeProfile.vue";

import echarts3 from "./Refund.vue";


//axios接口
import { getInfo } from '../../api/incomeAndExpenses/statistics.js'

import { queryInfo } from '../../api/incomeAndExpenses/statistics.js'

//分页
import { paging } from '../../api/incomeAndExpenses/statistics.js'


//总费用
import { getlumpSumExpenses } from '../../api/incomeAndExpenses/statistics.js'

//总退费费用
import { gettotalRefund } from '../../api/incomeAndExpenses/statistics.js'

//现金
import { getCash } from '../../api/incomeAndExpenses/statistics.js'

//微信
import { getWeChat } from '../../api/incomeAndExpenses/statistics.js'

//支付宝
import { getAlipay } from '../../api/incomeAndExpenses/statistics.js'



export default {
  components: {
    echarts,
    echarts2,
    echarts3,
  },
  mixins: [],
  props: {},
  data() {
    return {

      // defferScroll: function (event) {
      //       event.preventDefault()
      //   },


      cxObject: [],

      chargetypeoptions: [
        {
          value: "-1",
          label: "全部",
        },
        {
          value: "0",
          label: "就诊处",
        },
        {
          value: "1",
          label: "挂号处",
        },
      ],

      //缴费类型
      chargetype: "-1",

      chargestatusoptions: [
        {
          value: "-1",
          label: "全部",
        },
        {
          value: "0",
          label: "未支付",
        },
        {
          value: "1",
          label: "已支付",
        },
        {
          value: "2",
          label: "确认收款",
        },
        {
          value: "3",
          label: "申请退款",
        }, {
          value: "4",
          label: "已退款",
        }, {
          value: "5",
          label: "部分支付",
        }, {
          value: "6",
          label: "完成交易",
        }, {
          value: "7",
          label: "部分退款",
        },
      ],

      //缴费状态
      chargestatus: "-1",

      //起始时间和结束时间
      startAndEndDate: [],

      //表格数据
      tableData: [],

      //分页页数
      pages: 0,




      //收费
      charge: 0,

      //退费
      returnPremium: 0,


      cashSr: 0,
      WeChatSr: 0,
      AlipaySr: 0,




    };
  },
  computed: {},
  watch: {},
  mounted() {

    // document.body.addEventListener("touchmove", that.defferScroll, {passive: false});
    //     document.body.addEventListener("wheel", that.defferScroll, {passive: false});





    getInfo().then(rep => {


      console.log(rep.data)


      this.tableData = rep.data.list

      this.pages = rep.data.pages * 10


    })


    getlumpSumExpenses().then(rep => {

      this.charge = rep.data

    })

    gettotalRefund().then(rep => {

      this.returnPremium = rep.data


    })



    //现金收入
    getCash().then(rep => {
      if (rep.data != '') {

        this.cashSr = rep.data

      }

    })

    //微信收入
    getWeChat().then(rep => {

      if (rep.data != '') {

        this.WeChatSr = rep.data

      }

    })

    //支付宝收入
    getAlipay().then(rep => {
      if (rep.data != '') {

        this.AlipaySr = rep.data

      }
    })




  },
  methods: {


    //时间格式化转换7
    dateForma: function (row, column, data) {
      return moment.unix(data).format("YYYY-MM-DD ");
    },

    //分页下一页

    handleCurrentChange(val) {

      console.log(`当前页: ${val}`);
      if (this.cxObject.length == 0) {

        paging(val).then(rep => {

          this.tableData = rep.data.list

        })

      } else {

        console.log("<<<<<<<<<<<<")
        console.log(val)
        console.log(this.cxObject[0])
        console.log(this.cxObject[1])
        console.log(this.cxObject[2])
        console.log(this.cxObject[3])
        console.log(">>>>>>>>>>>>")
        queryInfo(val, this.cxObject[0], this.cxObject[1], this.cxObject[2], this.cxObject[3]).then(rep => {


          this.tableData = rep.data.list


        })

      }

    },

    

    //查询
    cx(pageNum) {


      if (this.startAndEndDate.length != 0) {

        var startDate = this.startAndEndDate[0].getTime()/1000;

        //将时间转化为时间戳
        var endDate = this.startAndEndDate[1].getTime()/1000;


        console.log(this.startAndEndDate[0])

        console.log(startDate)


        this.cxObject[0] = this.chargetype
        this.cxObject[1] = this.chargestatus
        this.cxObject[2] = startDate
        this.cxObject[3] = endDate


        queryInfo(pageNum, this.chargetype, this.chargestatus, startDate, endDate).then(rep => {

          console.log(rep.data)

          this.tableData = rep.data.list

          this.pages = rep.data.pages * 10

          console.log(rep.data.total)


          if(rep.data.total==0){

           this.startAndEndDate=[]

       }
        })

       


      } else {



        this.cxObject[0] = this.chargetype
        this.cxObject[1] = this.chargestatus
        this.cxObject[2] = ''
        this.cxObject[3] = ''

        queryInfo(pageNum, this.chargetype, this.chargestatus, '', '').then(rep => {

          console.log(rep.data)

          this.tableData = rep.data.list



          this.pages = rep.data.pages * 10


        

        })



      }



    }




  },
};
</script>
<style  scoped>
.el-header,
.el-footer {
  /* background-color: #B3C0D1;
    color: #333;
    text-align: center; */

  margin-left: 350px;
  line-height: 60px;
}

#titlediv {
  /* box-shadow: 10px 10px 5px -4px #e8eaed; */

  /* text-align: left; */

  /* height: 100%; */

  /* 设置圆角 */
  /* border-radius: 15px; */

  /* padding-left: 480px; */

  /* background-color: #ffff; */

  /* width: 100%; */

  /* margin-left: -350px ; */
}

/* --------------------- */

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
  /* margin-top: -10px; */
}

/* .bg-purple-dark {
    background: #99a9bf;
  } */
/* .bg-purple {
    background: #d3dce6;
  } */
/* .bg-purple-light {
    background: #e5e9f2;
  } */
.grid-content {
  border-radius: 4px;
  min-height: 36px;


}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #ffff;


  /* 设置圆角 */
  border-radius: 5px;

  /* 阴影 */
  box-shadow: 10px 10px 5px -4px #d7dee8;




}
</style>